<template>
	<view>
		<Loding :isVisible="showMap"></Loding>
		<view class="content">
			<Map ref="childMap" :detailsHide="detailsHide" :confirmPage="confirmPage" @show="show"></Map>
			<u-popup :show="popupShow" @close="close" overlayOpacity="0.2" mode="left" overlayStyle="position: absolute"
				:customStyle="{width:'220px'}" @open="open">
				<view>
					<uni-section title="城区" type="line" padding="5px">
						<u-grid :border="false" col="3">
							<u-grid-item v-for="(listItem,listIndex) in xzqCheckboxs" :key="listIndex"
								:customStyle="{paddingBottom:20+'rpx'}">
								<u-tag :text="listItem.text" :plain="!listItem.checked" plainFill style="width: 95%;"
									:name="listIndex" size="mini" @click="xzqCheckboxClick">
								</u-tag>
							</u-grid-item>
						</u-grid>
					</uni-section>
					<uni-section title="用途" type="line" padding="5px">
						<u-grid :border="false" col="3">
							<u-grid-item v-for="(listItem,listIndex) in ytCheckboxs" :key="listIndex"
								:customStyle="{paddingBottom:20+'rpx'}">
								<u-tag :text="listItem.text" :plain="!listItem.checked" plainFill style="width: 95%;"
									:name="listIndex" size="mini" @click="ytCheckboxClick">
								</u-tag>
							</u-grid-item>
						</u-grid>
					</uni-section>
					<uni-section title="面积(公顷)" type="line" padding="5px">
						<u-grid :border="false" col="2">
							<u-grid-item v-for="(listItem,listIndex) in mjCheckboxs" :key="listIndex"
								:customStyle="{paddingBottom:20+'rpx'}">
								<u-tag :text="listItem.text" :plain="!listItem.checked" plainFill style="width: 80%;"
									:name="listIndex" size="mini" @click="mjCheckboxClick">
								</u-tag>
							</u-grid-item>
						</u-grid>
					</uni-section>
					<uni-section title="" padding="10px">
						<view style="display: flex;justify-content: space-between;align-items: center;height: 50%;">
							<u-button type="primary" shape="circle" :customStyle="{padding:20+'rpx'}" text="确定"
								throttleTime="1000" @click="SubmitEvent"></u-button>
							<u-button type="warning" shape="circle" :customStyle="{padding:20+'rpx'}" text="重置"
								@click="ResetEvent"></u-button>
						</view>
					</uni-section>
				</view>
			</u-popup>
			<!-- 		<uni-drawer ref="showDrawer" mode="left" :mask="false" :width="200" :maskClick="false">
				<uni-section title="城区" type="line" padding="5px">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(listItem,listIndex) in xzqCheckboxs" :key="listIndex"
							:customStyle="{paddingBottom:20+'rpx'}">
							<u-tag :text="listItem.text" :plain="!listItem.checked" plainFill :name="listIndex" size="mini"
								@click="xzqCheckboxClick">
							</u-tag>
						</u-grid-item>
					</u-grid>
				</uni-section>
				<uni-section title="用途" type="line" padding="5px">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(listItem,listIndex) in ytCheckboxs" :key="listIndex"
							:customStyle="{paddingBottom:20+'rpx'}">
							<u-tag :text="listItem.text" :plain="!listItem.checked" plainFill :name="listIndex" size="mini"
								@click="ytCheckboxClick">
							</u-tag>
						</u-grid-item>
					</u-grid>
				</uni-section>
				<uni-section title="面积(公顷)" type="line" padding="5px">
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(listItem,listIndex) in mjCheckboxs" :key="listIndex"
							:customStyle="{paddingBottom:20+'rpx'}">
							<u-tag :text="listItem.text" :plain="!listItem.checked" plainFill :name="listIndex" size="mini"
								@click="mjCheckboxClick">
							</u-tag>
						</u-grid-item>
					</u-grid>
				</uni-section>
				<uni-section title="" padding="10px">
					<u-button type="primary" shape="circle" :customStyle="{padding:20+'rpx'}" text="确定" throttleTime="1000"
						@click="SubmitEvent"></u-button>
					<u-button type="warning" shape="circle" :customStyle="{padding:20+'rpx',marginTop:20+'rpx'}" text="重置"
						throttleTime="1000" @click="ResetEvent"></u-button>
					<u-button shape="circle" :customStyle="{padding:20+'rpx',marginTop:20+'rpx'}" text="取消"
						@click="CancelEvent"></u-button>
				</uni-section>
			</uni-drawer> -->
			<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" :vertical="vertical"
				:direction="direction" @trigger="trigger" />
			<view class="expandPopup" @click="open()">
				<u-icon name="arrow-right" size="25px"></u-icon>
			</view>
			<DataDetails ref="DataDetails" :speckleData="$store.state.user.attributes" @resetHeight="resetHeight">
			</DataDetails>
		</view>
	</view>

</template>

<script>
	import {
		getFeatureLayerUrl,
		getCategory,
		getServiceCode
	} from "@/api/land.js"
	import Loding from "@/components/loading.vue"
	import DataDetails from "@/components/DataDetails.vue"
	import Map from "@/components/Map.vue"
	import {
		searchAndDraw,
		drawAreaBorder
	} from '@/utils/initMap.js'
	export default {
		data() {
			return {
				confirmPage: false,
				detailsHide: true,
				showMap: '',
				count: 0,
				popupShow: false,
				vertical: 'top',
				pattern: {
					icon: "bars",
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				direction: 'vertical',
				content: [{
						iconPath: '/static/images/icon/where.png',
						selectedIconPath: '/static/images/icon/where-active.png',
						text: '地图',
						active: false
					},
					{
						iconPath: '/static/images/icon/yx.png',
						selectedIconPath: '/static/images/icon/yx-active.png',
						text: '影像',
						active: false
					},
					{
						iconPath: '/static/images/icon/bg-screen.png',
						selectedIconPath: '/static/images/icon/bg-screen-active.png',
						text: '筛选',
						active: false
					}
				],
				xzqCheckboxs: [{
						checked: false,
						text: '净月区'
					},
					{
						checked: false,
						text: '朝阳区'
					},
					{
						checked: false,
						text: '长春新区'
					},
					{
						checked: false,
						text: '经开区'
					},
					{
						checked: false,
						text: '双阳区'
					},
					{
						checked: false,
						text: '宽城区'
					},
					{
						checked: false,
						text: '南关区'
					},
					{
						checked: false,
						text: '汽开区'
					},
					{
						checked: false,
						text: '绿园区'
					},
					{
						checked: false,
						text: '二道区'
					},
					{
						checked: false,
						//text: '莲花山旅游度假区',
						text: '莲花山'
					}
				],
				ytCheckboxs: [{
						checked: false,
						text: '居住用地'
					},
					{
						checked: false,
						text: '工矿用地'
					},
					{
						checked: false,
						text: '公服用地'
					},
					{
						checked: false,
						text: '商服用地'
					}
				],
				mjCheckboxs: [{
						checked: false,
						text: '0-500'
					},
					{
						checked: false,
						text: '500-1000'
					},
					{
						checked: false,
						text: '1000-1500'
					},
					{
						checked: false,
						text: '1500++'
					}
				]
			}
		},
		watch: {
			"$store.state.user.attributes": {
				handler(newVal, oldVal) {
					if (this.$store.state.user.route == 'pages/Land/details') return
					if (newVal) {
						this.$refs.DataDetails.move(1)
						this.detailsHide = false
					}
					if (!newVal) {
						this.$refs.DataDetails.move(2)
						this.detailsHide = true
					}
				},
				deep: true, //true 深度监听
			}
		},
		components: {
			Map,
			Loding,
			DataDetails
		},
		methods: {
			resetHeight() {
				console.log('222')
				this.detailsHide = true
			},
			async int() {
				const serviceCode = await getServiceCode()
				const url = await getFeatureLayerUrl(serviceCode.msg);
				await this.$refs.childMap.int(url.data[0].serveUrl);
				searchAndDraw(this.$store.state.user.params)
			},
			close(e) {
				this.close()
			},
			showPopup(e) {
				this.open()
			},
			xzqCheckboxClick(name) {
				this.xzqCheckboxs[name].checked = !this.xzqCheckboxs[name].checked
			},
			ytCheckboxClick(name) {
				this.ytCheckboxs[name].checked = !this.ytCheckboxs[name].checked
			},
			mjCheckboxClick(name) {
				this.mjCheckboxs[name].checked = !this.mjCheckboxs[name].checked
			},
			trigger(e) {
				this.content.forEach((item, index) => {
					if (index == e.index) {
						item.active = !e.item.active
					} else {
						item.active = false
					}
				})
				if (e.item.text === "筛选") {
					this.open()
				} else if (e.item.text === "地图") {
					this.$refs.childMap.tabs(0)
				} else {
					this.$refs.childMap.tabs(1)
				}

			},
			SubmitEvent() {
				this.content[2].active = false;
				this.close()
				let params = this.getQueryParams()
				console.log(params, '1111')
				this.$store.state.user.params = params
				params.featureType = 'znxd'
				searchAndDraw(params).then(res => {
					if (res == '') {
						uni.showToast({
							// icon:'info-filled',
							title: "未找到"
						})
					}
				})
				// this.$emit('search', params);

			},
			CancelEvent() {
				this.content[2].active = false;
				// this.$refs.showDrawer.close();
				this.close()
			},
			// 重置
			ResetEvent() {
				// TODO 需要重新获取行政区、用途等数据
				this.xzqCheckboxs.forEach(item => {
					item.checked = false
				})
				this.ytCheckboxs.forEach(item => {
					item.checked = false
				})
				this.mjCheckboxs.forEach(item => {
					item.checked = false
				})
				// searchAndDraw({
				// 	sql: ' 1=1 '
				// })
			},
			// 获取查询条件，返回类型对象类型，params为具体条件，sql为拼接好的条件语句
			getQueryParams() {
				let params = {}
				let sql = '' //查询sql语句
				// 处理行政区搜索
				let xzq = ''
				this.xzqCheckboxs.forEach(item => {
					let str = item.realName
					// if (item.text == '莲花山') str = '莲花山旅游度假区'
					if (item.checked) xzq += ",'" + str + "'"
				})
				xzq = xzq.replace(",", "")
				if (xzq) sql += " and " + this.xzqCheckboxs[0].columnName + " in (" + xzq + ")"

				// 处理用途
				let yt = ''
				this.ytCheckboxs.forEach(item => {
					let str = item.realName
					// if (item.text == '公服用地') str = '公共管理与公共服务用地'
					// if (item.text == '商服用地') str = '商业服务业用地'
					if (item.checked) yt += ",'" + str + "'"
				})
				yt = yt.replace(",", "")
				if (yt) sql += " and " + this.ytCheckboxs[0].columnName + " in (" + yt + ")"

				// 处理面积
				let mj = ''
				let isSearchMianJi = false
				this.mjCheckboxs.forEach(item => {
					if (item.checked) isSearchMianJi = true
				})
				if (isSearchMianJi) {
					sql += ' and ( '
					let tempSql = ''
					this.mjCheckboxs.forEach(item => {
						if (item.checked) {
							yt += "," + item.realName + ""
							if (item.realName.indexOf('-') != -1) {
								let mianji_ = item.realName.split('-')
								tempSql += ' or ( ' + this.mjCheckboxs[0].columnName + ' > ' + mianji_[0] +
									' and ' + this.mjCheckboxs[0].columnName + ' < ' + mianji_[1] + ')'
							} else {
								tempSql += ' or ( ' + this.mjCheckboxs[0].columnName + ' > ' + item.realName
									.replace("++", "") + ' ) '
							}
						}
					})
					tempSql = tempSql.replace("or", "")
					sql += tempSql + ' )'
				}
				params.xzq = xzq
				params.yt = yt
				params.mj = mj
				sql = sql.replace("and", "")
				if (!sql) {
					sql = ' 1=1 '
				} else {
					if (sql.indexOf('朝阳区') != -1 && sql.indexOf('永春现代生物医药城') == -1) {
						sql = sql.replace("'朝阳区'", "'朝阳区','永春现代生物医药城'")
					}
				}
				return {
					params,
					sql
				}
			},
			open() {
				this.$refs.DataDetails.move(2)
				this.detailsHide = true
				this.popupShow = true
			},
			close() {
				this.popupShow = false
			},
			// 获取城区分类
			getXzqCategory(codeValue) {
				const data = {
					serveCode: codeValue,
					code: 'znxd_cq'
				}
				getCategory(data).then(res => {
					this.xzqCheckboxs = res.data.map((item, index) => {
						return {
							checked: false,
							text: item.showName,
							realName: item.realName,
							columnName: item.columnName
						}
					})
				})
			},
			// 获取用途分类
			getYtCategory(codeValue) {
				const data = {
					serveCode: codeValue,
					code: 'znxd_yt'
				}
				getCategory(data).then(res => {
					this.ytCheckboxs = res.data.map((item, index) => {
						return {
							checked: false,
							text: item.showName,
							realName: item.realName,
							columnName: item.columnName,
						}
					})

				})
			},
			show() {
				console.log('111')
				this.showMap = 'none'
				this.open()
			},
			// 获取面积分类
			getMjCategory(codeValue) {
				const data = {
					serveCode: codeValue,
					code: 'znxd_mj'
				}
				getCategory(data).then(res => {
					this.mjCheckboxs = res.data.map((item, index) => {
						return {
							checked: false,
							text: item.showName,
							realName: item.realName,
							columnName: item.columnName,
						}
					})
					console.log(this.mjCheckboxs, 22222222)
				})
			}
		},
		// onNavigationBarButtonTap(e) {
		// 	if (this.showLeft) {
		// 		// this.$refs.showDrawer.close()
		// 		this.close()
		// 	} else {
		// 		// this.$refs.showDrawer.open()
		// 		this.open()
		// 	}
		// },
		async mounted() {
			this.showMap = 'block'
			this.count++
			const serviceCode = await getServiceCode()
			if (this.count == 1) {
				// uni.showLoading({
				// 	title: '地图加载中',
				// 	mask: true
				// });
				const url = await getFeatureLayerUrl(serviceCode.msg)
				await this.$refs.childMap.int(url.data[0].serveUrl);
				// this.$refs.showDrawer.open();
				// uni.hideLoading()

			}
			this.getXzqCategory(serviceCode.msg)
			this.getYtCategory(serviceCode.msg)
			this.getMjCategory(serviceCode.msg)
			// drawAreaBorder({params:{xzq:''}})
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		// position: relative;

		// .map {
		// 	height: 100%;
		// }

		.slotContent {
			width: 250px;
			overflow: auto;

			.title {
				color: #777777;
			}

			.selectButton {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;

				.button {
					// border: 1px solid #dededf;
					font-size: 12px;
					text-align: center;
					line-height: 35px;
					margin: 15px;
					background-color: #dededf;
					border-radius: 8px;
					// padding: 10px 20px;
					width: 63px;
					height: 35px;
					margin: 5px 5px;
				}
			}

			.selectButton.mjyt .button {
				width: 100px;
				height: 35px;
				line-height: 35px;
			}
		}
	}

	.active {
		background-color: #73aefe !important;
		color: #fff;
	}

	.u-page__tag-item {
		margin: 5px;
	}

	.expandPopup {
		height: 40px;
		background-color: #ededed94;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 1;
		display: flex;
		justify-content: center;
		border-radius: 0 8px 8px 0;
	}

	::v-deep .u-tag--medium {
		width: 74px;
		text-align: center;
	}

	::v-deep .u-tag__text--primary--plain {
		margin: auto;
	}

	::v-deep .u-button {
		height: 32px;
		width: 70px;
	}

	::v-deep .u-slide-left-enter-active {
		position: absolute !important;
	}

	::v-deep .u-fade-enter-active {
		& .u-tag__text--mini {
			text-align: center;
			display: block;
			width: 100%;
		}
	}
</style>